<template>
  <el-cascader
    style="width: 150px"
    v-model="selectValue"
    :props="props1"
    :show-all-levels="false"
    filterable
    clearable
    @change="change" />
</template>

<script setup>
import { ref } from "vue";
import ApiBaseRiceBarn from "@/api/modules/base-rice-barn"
import ApiBaseRiceBarnGoods from "@/api/modules/base-rice-barn-goods"

// 选中的值
const selectValue = ref()
// props
const props = defineProps(["checkStrictly"])
// emits
const emits = defineEmits(["change"])

const props1 = {
  lazy: true,
  checkStrictly: props.checkStrictly,
  async lazyLoad(node, resolve) {
    const { value, level } = node
    const nodeList = []
    if (level === 0) {
      const data = await ApiBaseRiceBarn.getSimpleNameList()
      data.data.forEach(item => {
        nodeList.push({
          value: item.id,
          label: item.simple_name,
          leaf: level >= 1,
        })
      })
    }
    if (level === 1) {
      const data = await ApiBaseRiceBarnGoods.getSimpleNameList("/baseRiceBarnGoods/", {
        baseRiceBarnId: value
      })
      data.data.forEach(item => {
        nodeList.push({
          value: item.id,
          label: item.simple_name,
          leaf: level >= 1,
        })
      })
    }
    resolve(nodeList)
  },
}

// 改变回调
const change = (val) => {
  emits("change", val)
}

defineExpose({ selectValue })
</script>

<style lang="scss">
.el-cascader-menu {
  .el-cascader-menu__wrap {
    height: 300px;
  }
}
</style>